<script lang="ts">
import { defineComponent, ref, watch } from "vue"
import { UserModule } from "@/store/modules/user";
import { lpMineModule } from "@/store/modules/lpMine";
import { Erc20Module } from "@/store/modules/erc20";
import { useI18n } from "vue-i18n";
import { showToast, showDialog, showConfirmDialog } from 'vant';
import { BigNumber } from "bignumber.js";
import { toWei, fromWei, formatAddress } from "@/utils/format";
import { USDT_TOKEN, lpMine_CONTRACT } from "@/contract";
import { debounce } from "@/utils/debounce.js";


export default defineComponent({
    setup() {
        const { t } = useI18n();
        const amount = ref()
        const amount2 = ref()
        const minAmount = ref(100)
        const minAmount2 = ref(10)
        const pageLoading = ref(true)
        const loading = ref(false)
        const loading2 = ref(false)
        const loading3 = ref(false)
        const isSwapDisabled = ref(false)
        const USDT = ref()
        const price = ref()
        const userInfo = ref({})
        const getWithdrawableStatic = ref()
        const calU = ref(0)
        const sendStake = async () => {
            if (!Number(amount.value)) return
            loading.value = true;
            try {
                await UserModule.verifyToken();
                if (USDT.value < Number(amount.value)) {
                    showToast(t("layout.theBalanceDOGEIsOnly") + USDT.value);
                    loading.value = false;
                    return;
                }
                if (minAmount.value > Number(amount.value)) {
                    showToast(t('layout.lowest') + minAmount.value);
                    loading.value = false;
                    return;
                }
                const allowance = await Erc20Module.allowance({
                    owner: USDT_TOKEN,
                    spender: lpMine_CONTRACT,
                });
                if (new BigNumber(allowance).lte(toWei(amount.value))) {
                    await Erc20Module.approve({
                        owner: USDT_TOKEN,
                        spender: lpMine_CONTRACT,
                    });
                }
                await lpMineModule.stake(amount.value);
                loadData();
                showDialog({ title: `${t("layout.success")}` })
            } catch (error) { }
            loading.value = false;
        }
        const sendStakeSecond = async () => {
            if (!Number(amount2.value)) return
            loading2.value = true;
            try {
                // const calU = await lpMineModule.calU(userInfo.value[6])
                // if (fromWei(calU) < minAmount2.value) {
                //     showToast(t('layout.SecondPledgeBalance') + fromWei(calU));
                //     loading2.value = false;
                //     return
                // }
                if (USDT.value < Number(amount2.value)) {
                    showToast(t("layout.theBalanceDOGEIsOnly") + USDT.value);
                    loading2.value = false;
                    return;
                }
                if (minAmount2.value > Number(amount2.value)) {
                    showToast(t('layout.lowest') + minAmount2.value);
                    loading2.value = false;
                    return;
                }
                const allowance = await Erc20Module.allowance({
                    owner: USDT_TOKEN,
                    spender: lpMine_CONTRACT,
                });
                if (new BigNumber(allowance).lte(toWei(amount2.value))) {
                    await Erc20Module.approve({
                        owner: USDT_TOKEN,
                        spender: lpMine_CONTRACT,
                    });
                }
                await lpMineModule.stakeSecond(amount2.value);
                loadData();
                showDialog({ title: `${t("layout.success")}` })
            } catch (error) { }
            loading2.value = false;
        }
        const sendGetReward = async () => {
            loading3.value = true;
            try {
                await lpMineModule.getReward();
                loadData();
                showDialog({ title: `${t("layout.success")}` })
            } catch (error) { }
            loading3.value = false;
        }
        const loadData = async () => {
            lpMineModule.getPrice().then(res => {
                price.value = res
            })
            lpMineModule.userInfo().then(res => {
                userInfo.value = res
                lpMineModule.calU(fromWei(userInfo.value[6])).then(res => {
                    calU.value = res
                })

            })
            lpMineModule.getWithdrawableStatic().then(res => {
                getWithdrawableStatic.value = res
            })

            let usdt: string = await Erc20Module.balanceOf({
                owner: USDT_TOKEN,
            });
            USDT.value = fromWei(usdt);
            pageLoading.value = false
            pageLoading.value = false
        }
        watch(
            () => UserModule.userAddr,
            (newUserAddr: string) => {
                if (newUserAddr) {
                    loadData();
                }
            },
            { immediate: true }
        );
        return {
            amount,
            amount2,
            pageLoading,
            loading,
            price,
            userInfo,
            loading2,
            loading3,
            getWithdrawableStatic,
            calU,
            isSwapDisabled,
            fromWei,
            sendStake,
            sendStakeSecond,
            sendGetReward,
        }
    }
})
</script>

<template>
    <div class="page">
        <div class="total">
            <div class="cell">
                <div class="label"><img src="@/assets/image/image2.png" alt="" srcset="">{{ $t('layout.Currentprice') }}
                </div>
                <div class="value">{{ fromWei(price) }}</div>
            </div>
            <div class="right">
                <div class="cell">
                    <div class="label"><i></i> {{ $t('layout.Accumulatedpledge') }}</div>
                    <div class="value">{{ fromWei(userInfo[2]) }}</div>
                </div>
                <div class="cell">
                    <div class="label"><i></i>{{ $t('layout.Cumulativewithdrawals') }}</div>
                    <div class="value">{{ fromWei(userInfo[3]) }}</div>
                </div>
            </div>
        </div>
        <div class="border">
            <div class="form">
                <van-field v-model="amount" :placeholder="$t('layout.PleaseentertheUSDTquantity')" type="number" />
                <van-button type="primary" :disabled="pageLoading" :loading="loading" @click="sendStake">{{
                    $t('layout.Stakingmining')
                }}</van-button>
            </div>
        </div>
        <div class="border">
            <div class="form">
                <div class="row">
                    <div class="cell">
                        <div class="label"><img src="@/assets/image/image10.png" alt="" srcset="">{{
                            $t('layout.Quadraticquantity') }}</div>
                        <div class="value">{{ fromWei(userInfo[6]) }}</div>
                    </div>
                </div>
                <van-field v-model="amount2" :placeholder="$t('layout.PleaseentertheUSDTquantity')" type="number">
                    <template #right-icon>
                        <span>{{ fromWei(calU) }}</span>
                    </template>
                </van-field>
                <van-button type="primary" :disabled="pageLoading || isSwapDisabled" :loading="loading2"
                    @click="sendStakeSecond">{{
                        $t('layout.Secondpledge') }}</van-button>
            </div>
        </div>
        <div class="border">
            <div class="form">
                <div class="row">
                    <div class="cell">
                        <div class="label"><img src="@/assets/image/image11.png" alt="" srcset="">{{
                            $t('layout.Contractmining') }}</div>
                        <div class="value">{{ fromWei(getWithdrawableStatic) }}</div>
                    </div>
                    <div class="cell">
                        <div class="label"><img src="@/assets/image/image12.png" alt="" srcset="">{{
                            $t('layout.Contributionrewards') }}</div>
                        <div class="value">{{ fromWei(userInfo[5]) }}</div>
                    </div>
                </div>
                <van-button type="primary" :disabled="fromWei(userInfo[5]) == 0 && fromWei(getWithdrawableStatic) == 0"
                    :loading="loading3" @click="sendGetReward">{{
                        $t('layout.receive') }}</van-button>
            </div>
        </div>
    </div>
    <referrer @load="sendStake" />
</template>

<style lang="less" scoped>
.page {
    padding: 15px;

    .total {
        margin-bottom: 18px;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .cell {
            .label {
                display: flex;
                align-items: center;

                img {
                    margin-right: 8px;
                    width: 16px;
                    height: 16px;
                }
            }

            .value {
                margin-top: 10px;
                font-size: 25px;
                font-weight: bold;
                padding-left: 22px;
                text-align: center;
            }
        }

        .right {
            .cell {
                display: flex;
                align-items: center;
                font-size: 12px;
                font-weight: 400;
                color: #FFDBC4;

                i {
                    margin-right: 8px;
                    width: 5px;
                    height: 5px;
                    background: #FFDBC4;
                    border-radius: 1px;
                }

                .label {
                    min-width: 100px;
                }

                .value {
                    flex: 1;
                    margin: 0;
                    font-size: 12px;
                    font-weight: bold;
                    text-align: right;
                }

                &:last-child {
                    margin-top: 15px;
                }
            }
        }
    }

    .border {
        margin-top: 12px;
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 8px;

    }

    .form {
        padding: 20px 15px;
        background: linear-gradient(90deg, #01012B 0%, #32437B 100%);
        border-radius: 8px;

        .row {
            .cell {
                margin-bottom: 12px;
                padding: 13px 15px;
                display: flex;
                justify-content: space-between;
                align-items: center;
                border-radius: 8px;
                border: 1px solid rgba(255, 255, 255, 0.1);



                .label {
                    display: flex;
                    align-items: center;

                    img {
                        margin-right: 9px;
                        height: 20px;
                    }
                }

                .value {
                    font-size: 15px;
                    font-weight: bold;
                    color: #FFBD91;
                }
            }
        }

        .van-field {
            background: transparent;
            border-radius: 8px;
            border: 1px solid rgba(255, 255, 255, 0.1);

            &:deep(input) {
                color: #fff;
            }

            &::after {
                display: none
            }

            span {
                font-size: 15px;
            }
        }

        ul {
            display: flex;
            align-items: center;
            justify-content: space-between;

            li {
                width: 151px;
                height: 45px;
                line-height: 45px;
                text-align: center;
                border-radius: 8px;
                border: 1px solid rgba(255, 255, 255, 0.1);
            }
        }

        .van-button {
            margin-top: 12px;
        }

        .txt {
            margin-top: 12px;
            font-size: 12px;
            font-weight: 400;
            color: #FFDBC4;
            text-align: center;
            opacity: 0.5;
        }
    }
}
</style>
